<template>
  <view class="cate">
    <my-search @click="toSearch"></my-search>
    <view class="content">
      <!-- 左侧 -->
      <scroll-view class="left" scroll-y="true"  :style="{height:wh + 'px'}">
        <view class="item" @click="changeActive(index)" :class="{active:active === index}"  v-for="(item, index) in cateList" :key="index">
          {{ item.cat_name }}
        </view>
      </scroll-view>
      <!-- 右侧 -->
      <scroll-view class="right" scroll-y="true" :scroll-top="scrollTop"  :style="{height:wh + 'px'}">
        <view class="two" v-for="(item, index) in subCateList" :key="index">
          <!-- 渲染二级数据 -->
          <view class="title">
            /{{ item.cat_name }}/
          </view>
             <!-- 渲染二级下的三级数据 -->
                <view class="three">
                  <view class="item" @click="toList(titem.cat_name)" v-for="(titem, tindex) in item.children" :key="tindex">
                    <image :src="titem.cat_icon" mode=""></image>
                    <text>{{ titem.cat_name }}</text>
                  </view>
                </view>
        </view>
        
      </scroll-view>
    </view>
  </view>
</template>

<script>
import mymixins from '../../mixins/mymixins.js'
  export default {
    mixins:[mymixins],
    data() {
      return {
      // 动态计算窗口的剩余高度
        wh:0,
        active:0,
        // 分类数据源
        cateList:[],
         // 当前选中一级分类下的二级分类
            subCateList: [],
              // 滚动条的位置
                scrollTop: 0
      };
     },
  onLoad(){
        this.getWidth(),
        this.getCateList()
      },
  methods:{
    // 搜索
    toSearch(){
      uni.navigateTo({
        url:'/pages/search/search'
      })
    },
    // 跳转到详情页面
    toList(name) {
      uni.navigateTo({
        url: `/pages/list/list?key=${name}`
      })
    },
    // 获取分类数据源
    async getCateList(){
      const {data:res} = await uni.$http.get('/categories')
      if (res.meta.status !== 200) return uni.$showMsg()
         this.cateList = res.message
             // 得到选中一级下的二级分类数据
             this.subCateList = this.cateList[this.active].children
    
    },
    changeActive(index) {
      this.active = index
      // 得到修改后的一级分类下的二级分类数据
  this.subCateList = this.cateList[index].children
    // 重置滚动条的位置
    this.scrollTop = this.scrollTop === 0 ? 1 : 0
    },
        async getWidth(){
          // 获取可用区域的高度
          const res= await uni.getSystemInfo()
          console.log(res);
          // console.log(windowHeight);
          this.wh = res[1].windowHeight-60
         
         //    wx.getSystemInfo 直接返回信息对象
           //    uni.getSystemInfo 直接返回一个数组： [null, { // 信息对象 }]
          
          
        }
      },
    
  }
</script>

<style lang="scss">
  .cate {
    .content {
      display: flex;
  
      .left {
        width: 200rpx;
         .item {
              height: 100rpx;
              line-height: 100rpx;
              text-align: center;
              background-color: #f7f7f7;
        
              &.active {
                background-color: #fff;
                position: relative;
        
                &::before {
                  content: "";
                  height: 60rpx;
                  width: 4rpx;
                  background-color: #c00000;
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 0;
                }
              }
            }
      }
      .right {
        .two {
          .title {
            text-align: center;
            line-height: 100rpx;
            font-weight: 700;
          }
           .three {
                display: flex;
                flex-wrap: wrap;
          
                .item {
                  width: 33.33%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
          
                  image {
                    width: 120rpx;
                    height: 120rpx;
                  }
          
                  text {}
                }
              }
        }
      }
    }
  }

</style>
